@import './common-form-functions.less';

// 日历选择器
.aj-form-calendar {
	font-family        : Verdana;
	font-size          : .8rem;
	background-color   : white;
	border             : 1px solid lightgray;
	border-radius      : 5px;
	box-shadow         : 0 5px 10px rgba(0, 0, 0, 0.2);
	text-align         : center;
	width              : 320px;
	-webkit-user-select: none;
	-moz-user-select   : none;
	user-select        : none;
	padding            : 10px;
	line-height        : 1.5em;

	a {
		color: #1e5494;
	}

	.selectYearMonth {
		float: right;
		width: 100px;

		div {
			display: inline-block;
		}
	}

	.showCurrentYearMonth {
		text-align: left;
		color     : lightgray;
		font-size : 1.6rem;
		padding   : 5% 0;
	}

	table {
		width          : 100%;
		border         : 0;
		border-spacing : 0;
		border-collapse: collapse;

		thead {
			tr {
				color        : #acacac;
				border-bottom: 1px solid lightgray;
				margin-bottom: 15px;
			}
		}

		td {
			font-size       : .8rem;
			padding         : .4rem;
			letter-spacing  : 1px;
			border          : 0;
			background-color: white;
			text-align      : center;

			&.day {
				cursor    : pointer;
				transition: background-color 190ms ease-in-out;
			}

			&.onToday {
				font-weight: bold;
				color      : #C60;
			}

			&.onSelect {
				font-weight: bold;
			}

			&.day:hover {
				color           : darken(#e0ecf9, 50%);
				background-color: #e9e9e9;
			}
		}
	}

	.idCalendarPre,
	.idCalendarNext {
		cursor       : pointer;
		font-size    : 1.2rem;
		text-align   : center;
		border-radius: 3px;
		padding      : 2px 5px;

		&:hover {
			background-color: #e9e9e9;
		}
	}

	.idCalendarPre {
		float: left;
	}

	.idCalendarNext {
		float: right;
	}

	.btns {
		position: absolute;
		left    : 15px;
		bottom  : 5px;

		input[type=button] {
			font-size: .8rem;
			padding  : 2px 4px;
			margin   : 1px;
		}
	}
	.showTime{
		margin-top: 5%;
		select {
			min-width:50px;
			text-align: center;
		}
	}
}

// 日历 悬浮出现
.aj-form-calendar-input {
	position: relative;
	width   : 125px;

	&.show-time {
		width: 170px;
	}

	display: inline-block;

	input[type=text] {
		.aj-input-base();
		max-width: 100% ! important;
		width    : 100% ! important;

	}

	.icon {
		position              : absolute;
		width                 : 17px;
		height                : 16px;
		right                 : 5px;
		top                   : 6px;
		opacity               : .6;
		cursor                : pointer;
		//		.menu {
		//			color: #000;
		//			position: absolute;
		//			margin-left: 2px;
		//			margin-top: 8px;
		//			width: 17px;
		//			height: 1px;
		//			background-color: currentColor;
		//			&:before {
		//				content: '';
		//				position: absolute;
		//				top: -5px;
		//				left: 0;
		//				width: 17px;
		//				height: 1px;
		//				background-color: currentColor;
		//			}
		//
		//			&:after {
		//				content: '';
		//				position: absolute;
		//				top: 5px;
		//				left: 0;
		//				width: 17px;
		//				height: 1px;
		//				background-color: currentColor;
		//			}
		//		}
	}

	.aj-form-calendar {
		z-index : 999999999;
		display : none;
		position: absolute;

		&.positionFixed {
			// 若父元素 overflow:hidden，则 position: absolute 不能完整显示，故 fixed
			position: fixed;
		}

		right: -3px;
		top  : 25px;
	}

	&:hover .aj-form-calendar,
	.aj-form-calendar:hover {
		display: block;

		.icon {
			opacity: .5;
		}
	}

	&:hover .icon {
		opacity: 1;
	}

	.selectYearMonth select {
		min-width: 65px;
	}
}